<template>
  <div id="localtionMap" v-drag class="localtionMap">
    <div class="panelWrap coo-wrap">
      <div class="coo-title title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>选择坐标</div>
        <i class="el-icon-close" @click="handleCloseCoordinate" />
      </div>
      <div class="con co-map" style="background: #ffffff;">
        <div class="coo-search flex flexac searchSite p-t-15 p-b-15">
          <label
            class="inputLable m-l-15"
          >关键词：<input
            v-model="keyword"
          ></label>
          <label
            class="inputLable m-l-15"
          >地区：<input
            v-model="location"
          ></label>
          <el-button
            class="defaultbtn saveBtn m-l-20"
            @click="handleSave"
          >确定位置</el-button>
        </div>
        <baidu-map
          class="bm-view co-view"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          ak="k007NSYtuZzFz0PnG8YifooN4UmeTXlp"
          @click="getClickInfo"
          @ready="handler"
        >
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-local-search
            class="sdasdasdsa co-bottom"
            :keyword="keyword"
            :auto-viewport="true"
            :location="location"
            :page-capacity="pageCapacity"
            @markersset="getMarkersset"
            @infohtmlset="getInfohtmlset"
          />
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
//  import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
import MapView from 'vue-baidu-map/components/map/MapView.vue'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bus from '@/utils/bus'

export default {
  name: 'Map',
  components: {
    BaiduMap
  },
  directives: {
    drag(el, bindings) {
      // console.log(el)
      el.onmousedown = function(e) {
        var disx = e.pageX - el.offsetLeft
        var disy = e.pageY - el.offsetTop
        document.onmousemove = function(e) {
          el.style.left = e.pageX - disx + 'px'
          el.style.top = e.pageY - disy + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 3,
      location: '长沙',
      keyword: '长沙岳麓区',
      address: {
        province: '',
        city: '',
        title: ''
      },
      pageCapacity: 4
    }
  },
  mounted() {
    // coordinate
    // console.log(document.documentElement.clientWidth)
    const clientWidth = document.documentElement.clientWidth
    if (clientWidth <= 1366) {
      this.pageCapacity = 3
    }
    window.onload = function() {
      var drag = document.getElementById('localtionMap')
      // //点击某物体时，用drag对象即可，move和up是全局区域，
      // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
      drag.onmousedown = function(event) {
        var e = event || window.event // 兼容IE浏览器
        //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
        var diffX = e.clientX - drag.offsetLeft
        var diffY = e.clientY - drag.offsetTop
        if (typeof drag.setCapture !== 'undefined') {
          drag.setCapture()
        }
        document.onmousemove = function(event) {
          var e = event || window.event
          var moveX = e.clientX - diffX
          var moveY = e.clientY - diffY
          if (moveX < 0) {
            moveX = 0
          } else if (moveX > window.innerWidth - drag.offsetWidth) {
            moveX = window.innerWidth - drag.offsetWidth
          }
          if (moveY < 0) {
            moveY = 0
          } else if (moveY > window.innerHeight - drag.offsetHeight) {
            moveY = window.innerHeight - drag.offsetHeight
          }
          drag.style.left = moveX + 'px'
          drag.style.top = moveY + 'px'
        }
        document.onmouseup = function(event) {
          this.onmousemove = null
          this.onmouseup = null
          // 修复低版本ie bug
          if (typeof drag.releaseCapture !== 'undefined') {
            drag.releaseCapture()
          }
        }
      }
    }
  },
  methods: {
    handleSave() {
      // console.log(this.center, this.address)
      bus.$emit('sendCoordinate', this.center)
      bus.$emit('sendCoordinateAddress', this.address)
    },
    getInfohtmlset(e) {
      // console.log('getInfohtmlset')
      // console.log(33, e)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      this.address.province = e.province
      this.address.city = e.city
      this.address.title = e.title
      this.address.address = e.address
    },
    getMarkersset(e) {
      // console.log('getMarkersset')
      // console.log(11, e)
    },
    getClickInfo(e) {
      // console.log(22, e)
      // console.log(e.point.lng)
      // console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    handleClickMap() {
      // console.log('点击了地图')
      // console.log(res)
    },
    handler({ BMap, map }) {
      // console.log(44, BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 18
    },
    handleCloseCoordinate() {
      bus.$emit('closeCoordinate')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
#localtionMap {
  margin-left: -100px;
  .coo-wrap {
    width: 900px;
    height: 500px;
    .bm-view {
      width: 100%;
      height: 350px;
    }
    .inputLable input {
      width: 235px !important;
      height: 28px;
      border-style: solid;
      border-width: 1px;
      border-color: var(--inputbc);
      overflow: auto;
      border-radius: 0;
      border-radius: 3px;
    }
    .sdasdasdsa {
      background: #ffffff;
      width: 900px;
      border-radius: 5px;
      margin-left: -1px;
    }
  }
}
</style>
